<script setup lang="ts">
	import { reactive, ref } from "vue";
	import {
		getCurrentInstance
	} from 'vue'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		userStore
	} from '@/pinia';
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	let detail = ref(null)
	onLoad((option) => {
		console.log(JSON.parse(decodeURIComponent(option.data)));
		detail.value = JSON.parse(decodeURIComponent(option.data))
	})
</script>
<template>
	<view class="billCard" v-if="detail!=null">
		<view class="" v-if="detail.inOut==0">
			<view class="bcl">
				<image class="logo" :src="detail.storeName" mode=""></image>
				<text class="t1">{{ detail.order3.storeName }}</text>
				<text class="t2">+{{ detail.order3.payPrice }}</text>
				<text class="t3">交易成功</text>
			</view>
			<view class="detailItem r-flex-between-center">
				<text>入帐时间</text>
				<text>{{ detail.order3.addTime }}</text>
			</view>
			<view class="detailItem r-flex-between-center">
				<text>财务类型</text>
				<text>在线支付</text>
			</view>
			<!-- <view class="detailItem r-flex-between-center">
				<text>交易号</text>
				<text>{{ detail.order3.tradeNo }}</text>
			</view> -->
			<view class="detailItem r-flex-between-center">
				<text>流水号</text>
				<text>{{ detail.order3.orderInfoList[0].orderId }}</text>
			</view>
			<view class="detailItem r-flex-between-center">
				<text>支付渠道</text>
				<text>拉卡拉支付</text>
			</view>
			<view class="detailItem r-flex-between-center">
				<text>订单编号</text>
				<text>{{ detail.order3.tradeNo }}</text>
			</view>
			<!-- <view class="detailItem r-flex-between-center">
				<text>服务费</text>
				<text>2.00</text>
			</view> -->
			<view class="detailItem r-flex-between-center">
				<text>业务描述</text>
				<text>购买商品</text>
			</view>
			<view class="detailItem r-flex-between-center">
				<text>备注</text>
				<text>{{ detail.order3.remark ||'--'}}</text>
			</view>
		</view>
		<view class="" v-else>
			<view class="bcl">
				<text class="t1">{{ detail.order3.storeName }}</text>
				<text class="t2">+{{ detail.order3.payPrice }}</text>
				<text class="t3">交易成功</text>
			</view>
			<view class="detailItem r-flex-between-center">
				<text>出帐时间</text>
				<text>{{ detail.order3.addTime }}</text>
			</view>
			<view class="detailItem r-flex-between-center">
				<text>财务类型</text>
				<text>在线支付</text>
			</view>
			<!-- <view class="detailItem r-flex-between-center">
				<text>交易号</text>
				<text>{{ detail.order3.tradeNo }}</text>
			</view> -->
			<view class="detailItem r-flex-between-center">
				<text>流水号</text>
				<text>{{ detail.order3.orderInfoList[0].orderId }}</text>
			</view>
			<view class="detailItem r-flex-between-center">
				<text>支付渠道</text>
				<text>拉卡拉支付</text>
			</view>
			<view class="detailItem r-flex-between-center">
				<text>订单编号</text>
				<text>{{ detail.order3.tradeNo }}</text>
			</view>
			<!-- <view class="detailItem r-flex-between-center">
				<text>服务费</text>
				<text>2.00</text>
			</view> -->
			<!-- <view class="detailItem r-flex-between-center">
				<text>业务描述</text>
				<text>购买商品</text>
			</view> -->
			<view class="detailItem r-flex-between-center">
				<text>备注</text>
				<text>{{ detail.order3.remark ||'--'}}</text>
			</view>
		</view>
	</view>
</template>
<style lang="scss">
	page {
		background-color: #fafafa;
	}

	view {
		box-sizing: border-box;
	}


	.billCard {
		width: 686rpx;
		margin: 30rpx auto 0;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		padding: 32rpx 0;

		.bcl {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.logo {
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
			}

			.t1 {
				font-size: 32rpx;
				font-weight: 600;
				padding: 16rpx 0 0;
			}

			.t2 {
				font-size: 40rpx;
				padding: 10rpx 0;
			}

			.t3 {
				font-size: 26rpx;
				color: #909399;
			}
		}

		.detailItem {
			padding: 16rpx 32rpx;

			text:nth-child(1) {
				font-size: 30rpx;
				font-weight: 600;
			}

			text:nth-child(2) {
				font-size: 30rpx;
				color: #606266;
			}
		}

	}
</style>